<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="bs/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="bs/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		
		<style>
			body{
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			
			a{
				text-decoration: none;
			}
			
			a:hover{
				cursor: pointer;
			}
			
			.header{
				width: 100%;
				height: 40px;
				background-color: black;
			}
			.header-con{
				width: 90%;
				height: 40px;
				margin: 0 auto;
			}
			
			.header-con div{
				float: right;
				line-height: 40px;
				margin-left: 20px;
			}
			
			.header-con div a{
				color: white;
			}
			
			.login-item{
				width: 80%;
				height: 40px;
				margin-bottom: 20px;
				margin: 10px auto;
			}
			
			.login-item a{
				width: 100%;
				height: 40px;
				background-color: #9597ee;
				display: block;
				text-align: center;
				line-height: 50px;
				color: white;
			}
			
			#loginbox{
				display: none;
			}
			
		</style>
	</head>

	<body>
		<div class="header">
			<div class="header-con">
				<div><a onclick="showloginbox()">登录</a></div>
				<div><a href="javascript:void(0)">注册</a></div>
			</div>
		</div>
		
		
		
		<div id="loginbox">
			<div class="login-item"><input type="text" id="txtUserName" placeholder="输入用户名"/></div>
			<div class="login-item"><input type="password" id="txtPwd" placeholder="输入密码"/></div>
			<div class="login-item"><a href="javascript:void(0)">登录</a></div>
		</div>



<script>
	function showloginbox(){
		layer.open({
			type:1,
			title:"登录",
			move:false,
			area:["395px","250px"],
			content:$("#loginbox")
		});
	}
</script>
	</body>

</html>